<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>模板页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			#immersed {
				background-color: #0B7EFD;
			}
			
			#immersed a,
			h1 {
				color: #fff;
			}
			
			.mui-title {
				color: #fff;
			}
			
			.mui-bar-nav{
			    -webkit-box-shadow:none!important;
			    box-shadow:none!important;
			}
			
			.mui-bar-nav.mui-bar .mui-icon {
			    margin: .25rem 0 0 .1rem;
			    padding: 0;
			}
			
			.mui-icon-back:before, .mui-icon-left-nav:before {
			    font-size: .42rem;
			}
			
			.mui-bar-nav .mui-icon-left-nav {
			    color: #fff;
			    font-size: .28rem;
			}
			.mui-loader {
				position: absolute;
				top: 40%;
				width: 100%;
				height: 60%;
				color: #888;
				font-size: 14px;
				text-align: center;
			}
			
			.mui-fadein {
				opacity: 1;
				animation:fadein 1.2s ;
				-webkit-animation:fadein 1.2s ; /* Safari and Chrome */
			}
			
			.mui-fadeout {
				opacity: 0;
				animation:fadeout 1.2s ;
				-webkit-animation:fadeout 1.2s ; /* Safari and Chrome */
			}
			
			@keyframes fadein {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
			
			@-webkit-keyframes fadein {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
			
			@keyframes fadeout {
				from {
					opacity: 1;
				}
				to {
					opacity: 0;
				}
			}
			
			@-webkit-keyframes fadeout {
				from {
					opacity: 1;
				}
				to {
					opacity: 0;
				}
			}
			/**
			 * 下拉刷新文字提示 位置设置
			 */
			
			.mui-bar-nav~.mui-content .mui-pull-top-pocket {
				top: 69px!important
			}
		</style>
	</head>

	<body>
		<header id="immersed" class="mui-bar mui-bar-nav">
			<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">返回</a>
			<a id="menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right" style="display: none;"></a>
			<h1 id="title" class="mui-title"></h1>
		</header>
		<div class="mui-content"></div>
		<div class="mui-loader">
			<!--<img src="../../images/loading.gif">-->
			<span style="padding-top:-3px;">正在载入，请稍候...</span>
		</div>
	</body>
	<script type="text/javascript">
		var my_immersed = function(immersed) {
			document.getElementById("immersed").style.height = immersed + 44 + 'px';
			document.getElementById("immersed").style.paddingTop = immersed + 'px';
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>

	<script type="text/javascript">
		//启用双击监听
		mui.init({
			gestureConfig: {
				doubletap: true
			}
		});
		var contentWebview = null,
			self = null;
		mui.plusReady(function() {
			self = plus.webview.currentWebview();
			mui.back = function() {
				self.hide('zoom-fade-in',300);
				setTimeout(function() {
					titleElem.className = 'mui-title mui-fadeout';
					titleElem.innerText = '';
					if(contentWebview == null) {
						contentWebview = self.children()[0];
					}
					if(mui.os.android && parseFloat(mui.os.version) >= 4.4) {
						contentWebview.hide();
					}
				}, 350);
			}
		});


		var titleElem = document.getElementById("title")
		var menuElem = document.getElementById("menu")

		function updateHeader(title,href){
			var aniShow = 'slide-in-right';
			if(href.indexOf("?")>-1){
				if(href.indexOf("random") == -1){
					href += '&random=' + Math.random();
				}
			}else{
				href += '?random=' + Math.random();
			}
			titleElem.innerHTML = title;
			titleElem.className = "mui-title mui-fadein";
			if(mui.os.android && aniShow && parseFloat(mui.os.version) >= 4.4) {
				if(contentWebview == null) {
					var interval = setInterval(function() {
						if(self&&self.children()) {
							clearInterval(interval);
							contentWebview = self.children()[0];
							contentWebview.loadURL(href);
							setTimeout(function() {
								self.show(aniShow,200,function(){
									contentWebview.show();
								});
							}, 10);
						} else {
							
						}
					}, 20);
				} else {
					contentWebview.loadURL(href);
					setTimeout(function() {
						self.show(aniShow,200,function(){
							contentWebview.show();
						});
					}, 10);
				}
			}
		};
	</script>

</html>